<div id="app">
    <input type="text" v-model.trim="username">

    <input type="text" v-model.number="count">

    <input type="text" v-model.number="person.name">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script src="./lib/jquery-v3.6.0.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: '',
            count: 18,
            person: {
                name: 'qiuqian'
            }
        },
        // watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
        watch: {
            // 1.普通侦听器
            // 侦听 username 的变化，newVal 是“变化后的新值”，oldVal 是“变化之前的旧值”。
            // 缺点：1）像这种 function 形式的侦听器，页面初始化时不会被触发。2）如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。
            async username(newVal, oldVal) {
                const res = await $.get('https://www.escook.cn/api/finduser/' + newVal)
                console.log(res)
            },

            // 2.对象侦听器
            // 优点：1）刚进入页面时，可以通过 immediate 选项，让侦听器自动触发！2）可以进行深度侦听。

            // 2.1对象侦听器-侦听器自动触发
            // 侦听 age 的变化，通过设置 immediate 为 true，实现页面初始化时自动触发侦听器。
            count: {
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                // 是否页面初始化时进行侦听，true：是，false：否（默认）
                immediate: true
            },

            // 2.2.对象侦听器-深度侦听
            // 侦听 person 的变化，通过设置 deep 为 true，开启深度监听，只要对象中任何一个属性变化了，都会触发侦听器。
            person: {
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                deep: true
            },

            // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
            'person.name'(newVal, oldVal){
                console.log(newVal, oldVal)
            }
        }
    })
</script>